<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入轮播样式 -->
    <link rel="stylesheet" href="css/slider.css">
    <!-- 引入放大镜样式 -->
    <link rel="stylesheet" href="css/magnifier.css">
    <!-- 引入产品详情样式 -->
    <link rel="stylesheet" href="css/projectShow.css">
    
</head>
<body>
        <!-- 头部 -->
        <header id="header">
            <div class="top">
                <div class="container clearfix">
                    <div class="fl">legochina.cn</div>
                    <div class="fr">
                        欢光临<a href="index.html">乐购</a> ,请&emsp;<a href="login.html">登录</a> / <a href="register.html">注册</a>
                    </div>
                    <a href="index.html" class="logo">
                        <img src="images/index/logo.jpg">
                    </a>
                </div>
            </div>
            <div class="searchbox container clearfix">
                <div class="my clearfix">
                    <a href="buy.html">购物车&nbsp;<em>3</em></a>
                    <a href="">我的订单</a>
                </div>
                <form action="">
                    <input type="text" name="" id="" class="fl" placeholder="创意文具">
                    <input type="submit" value="" id="sub" class="fl">
                </form>
            </div>
            <div class="nav container">
                <ul class="clearfix">
                    <li><a href="projectList.html">图书</a></li>
                    <li><a href="#">电子书</a></li>
                    <li><a href="#">原创文学</a></li>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">户外运动</a></li>
                    <li><a href="#">孕婴童</a></li>
                    <li><a href="#">家居</a></li>
                    <li><a href="#">创意文具</a></li>
                    <li><a href="#">地方特产</a></li>
                    <li><a href="#">海外购</a></li>
                    <li><a href="#">电器城</a></li>
                </ul>
            </div>
        </header>
        <!-- book详情 -->
        <section id="bookdetails">
            <div class="way container clearfix">
                <a href="projectList.html"><h5>图书</h5></a><a href="">&nbsp;>&nbsp;小说</a><a href="">&nbsp;>&nbsp;情感/家庭/婚姻</a><a href="">&nbsp;>&nbsp;博集天卷 </a><a href="">&nbsp;>&nbsp;她和他</a>
            </div>
            <div class="aboutbook container clearfix">
                <div class="l_book fl">
                    <!-- 放大镜 -->
                    <div class="magnifier" id="magnifier1">
                        <div class="magnifier-container">
                            <div class="images-cover"></div>
                            <!--当前图片显示容器-->
                            <div class="move-view"></div>
                            <!--跟随鼠标移动的盒子-->
                        </div>
                        <div class="magnifier-assembly">
                            <div class="magnifier-btn">
                                <span class="magnifier-btn-left">&lt;</span>
                                <span class="magnifier-btn-right">&gt;</span>
                            </div>
                            <!--按钮组-->
                            <div class="magnifier-line">
                                <ul class="clearfix animation03">
                                    <li>
                                        <div class="small-img">
                                            <img src="images/book/21090357-1_l.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/book/22472496-1_l_2.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/book/22499729-1_l_5.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/book/22616096-1_l.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/book/22788959-1_l.jpg" />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--缩略图-->
                        </div>
                        <div class="magnifier-view"></div>
                        <!--经过放大的图片显示容器-->
                    </div>
                    <div class="number">商品标号：11950959</div>
                </div>
                <div class="r_book fl">
                    <h5>他和她</h5>
                    <p class="tro">偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <span>[法] 马克.李维 著:杨亦雨 译</span>
                    <div class="price">
                        <p>乐购价：<span>￥26.20</span>&emsp;<span>[6.9]折 [定价：<span class="thro">￥38:00</span> ] （降价通知）</span></p>
                        <p>促销信息： <span> 满减 每满150.00元，可减50.00元现金</span> <a href="">详情 >></a></p>
                        <div class="clearfix">
                            <span class="one">领券 :</span>
                            <span class="bg">100-6</span>
                            <span class="bg">100-6</span>
                        </div>
                        <div class="evaluate">
                            <p>累计评价</p>
                            <span>9999</span>
                        </div>
                    </div>
                    <div class="type clearfix">
                        <span class="fl">种类选择：</span>
                        <div class="border">平装版</div>
                        <div class="tbg">精装版</div>
                    </div>
                    <form action="buy.html" id="shopping_cart" class="clearfix">
                        <div class="clearfix fl">
                            <input type="text" name="" id="" value="1" class="num">
                            <a class="add">+</a>
                            <a class="reduce">-</a>
                        </div>
                        <input type="submit" value="加入购物车" id="sub">
                    </form>
                    <p class="tips">温馨提示：支持7天无理由退货</p>
                </div>
            </div>
        </section>
        <!-- 人气单品 -->
        <section id="popularity" class="container">
            <div class="title">
                <h2>人气单品</h2>
            </div>
            <div class="p_con">
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
            </div>
        </section>
        <!-- 看了又看、商品介绍、评价 -->
        <section id="more" class="container clearfix">
            <div class="l_look fl">
                <h4>看了又看</h4>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
                <div class="con">
                    <a href="" class="bookimg"><img src="images/book/22935553-1_l.jpg" alt=""></a>
                    <div class="discount">
                        8折
                    </div>
                    <p><a href="">白夜行</a><a href="">东野上吾</a></p>
                    <div>推荐 <img src="images/book/6.jpg" alt=""></div>
                    <p>￥：38 <span>￥：58</span></p>
                </div>
            </div>
            <div class="r_intro fr">
                <div class="card clearfix">
                    <div>商品介绍</div>
                    <div class="cur" >评价（9999）</div>
                </div>
                <!-- 商品展示 -->
                <div class="more_con">
                    <div class="pro_con clearfix">
                        <div class="book clearfix">
                            <div class="l fl">
                                <p>他和她</p>
                                <p>Elle&nbsp; & &nbsp;Lui</p>
                                <img src="images/book/9.jpg" alt="">
                            </div>
                            <div class="r fr">
                                <p>累计销量超过3500万册<br>69国读者口碑相传</p>
                                <p>《偷影子的人》作者<br>马克.李维&nbsp;重磅出书</p>
                                <img src="images/book/23206608-1_l.jpg" alt="">
                            </div>
                        </div>
                        
                    </div>
                    <div class="brief">
                        <p>作品简介</p>
                        <p>她叫米娅，来自英国， 当红女演员，却只想远离萧瑟的伦敦，聆听感动与欢笑的话语。</p>
                        <p>他叫保罗，来自美国，曾经的建筑设计师，因为一本书- 炮而红，却无法适应他人追逐的目光。他隐身于巴黎，只能与自己小说中的人物结为挚友。</p>
                        <p>米娅的事业非常成功，保罗却一直郁郁不得志。保罗幽默风趣，米娅却不善与人交际。她很孤单，他也一直如此。缘于朋友善意的恶作剧，米娅和保罗相识于社交网络，却没有成为恋人，他们发展出很好的友谊，并试图将友情一直维持下去。</p>
                        <p>然而，一些意想不到的事情发生了....</p>
                    </div>
                </div>
                <!-- 评价 -->
                <div class="more_con show clearfix">
                    <div class="eva clearfix">
                        <div class="num fl">
                            <p>98%</p>
                            <span>好评度</span>
                        </div>
                        <div class="long fl">
                            <div class="clearfix">
                                <span>好评（98%）</span>
                                <div>
                                    <div class="one"></div>
                                </div>
                            </div>
                            <div class="clearfix">
                                <span>中评（20%）</span>
                                <div>
                                    <div class="two"></div>
                                </div>
                            </div>
                            <div class="clearfix">
                                <span>差评（0%）</span>
                                <div>
                                    <div class="three"></div>
                                </div>
                            </div>
                        </div>
                        <ul class="fl">
                            <li><span>1.州**子</span><span>+0</span></li>
                            <li><span>2.州**子</span><span>+10</span></li>
                            <li><span>3.州**子</span><span>+3</span></li>
                            <li><span>4.州**子</span><span>+0</span></li>
                        </ul>
                    </div>
                    <div class="eva_card">
                        <span class="span_cur">全部评价（9999）</span>
                        <span>好评（888）</span>
                        <span>中评（888）</span>
                        <span>差评（888）</span>
                    </div>
                    <div class="con">
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                        <div class="con_c clearfix">
                            <div class="one">
                                <img src="images/book/7.jpg" alt="">
                                <p>下单后5天评论</p>
                                <span>2016-08-11</span>
                            </div>
                            <div class="two">
                                书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                            </div>
                            <div class="three">
                                <div class="head">
                                    <img src="images/book/8.jpg" alt="">
                                    <span>洲**子</span>
                                </div>
                                <p>金牌会员</p>
                                <span>来自iPhone客户端</span>
                            </div>
                        </div>
                    </div>
                    <div class="pages clearfix">
                        <ul class="fr">
                            <li  class="active">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li class="w">......</li>
                            <li class="last">下一页</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 广告 -->
        <section class="ad container">
            <img src="images/book/3.jpg" alt="">
        </section>
        <!-- 页尾 -->
    <footer id="footer">
        <div class="service">
            <div class="container">
               <a href=""><img src="images/index/222_11.png" alt=""> </a>
               <a href=""><img src="images/index/222_13(1).png" alt=""> </a>
               <a href=""><img src="images/index/222_15.png" alt=""> </a>
               <a href=""><img src="images/index/222_17.png" alt=""> </a>
            </div>
        </div>
        <div class="help container clearfix">
            <ul>
                <li><h5>购物指南</h5></li>
                <li><a href="">购物流程</a></li>
                <li><a href="">发票制度</a></li>
                <li><a href="">账户管理</a></li>
                <li><a href="">会员优惠</a></li>
            </ul>
            <ul>
                <li><h5>支付方式</h5></li>
                <li><a href="">货到付款</a></li>
                <li><a href="">网上支付</a></li>
                <li><a href="">礼品卡支付</a></li>
                <li><a href="">银行转帐</a></li>
            </ul>
            <ul>
                <li><h5>订单服务</h5></li>
                <li><a href="">订单状态说明</a></li>
                <li><a href="">自助取消订单</a></li>
                <li><a href="">自助修改订单</a></li>
                <li><a href="">订单配送查询</a></li>
            </ul>
            <ul>
                <li><h5>退换货</h5></li>
                <li><a href="">退换货政策</a></li>
                <li><a href="">自助申请退换货</a></li>
                <li><a href="">退换货进度查询</a></li>
                <li><a href="">退款方式和时间</a></li>
            </ul>
            <ul>
                <li><h5>商家服务</h5></li>
                <li><a href="">商家中心</a></li>
                <li><a href="">运营服务</a></li>
                <li><a href="">加入尾品汇</a></li>
            </ul>
            <img src="images/index/logo_00.png" alt="">
        </div>
        <div class="footer_botm container">
            <a href="">公司简介</a>&emsp;|&emsp;
            <a href=""> Investor Relations</a>&emsp;|&emsp;
            <a href=""> 网站联盟 </a>&emsp;|&emsp;
            <a href=""> 乐购招商  </a>&emsp;|&emsp;
            <a href=""> 机构销售  </a>&emsp;|&emsp;
            <a href=""> 手机乐购  </a>&emsp;|&emsp;
            <a href=""> 官方Blog  </a>&emsp;|&emsp;
            <a href=""> 热词搜索  </a>
            <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
       
    </footer>
</body>
<!-- 1. 引入jQuery -->
<script src="lib/jquery.js"></script>
<!-- 2.引入放大镜js文件 -->
<script src="lib/magnifier.js"></script>
<!-- 3.引入公共js -->
<script src="js/common.js"></script>
<!-- 4. 引入当前页面js文件 -->
<script src="js/projectShow.js"></script>
</html>